<template>
  <div class="equipment">
    <div class="equipment__select">
      <div class="equipment__select-date">
        <el-date-picker
          v-model="dayTime"
          type="month"
          :clearable="false"
          size="mini"
          value-format="yyyy-MM"
          format="yyyy年M月"
          @change="getData">
        </el-date-picker>
      </div>
      <el-checkbox v-model="checked" @change="getData">当天</el-checkbox>
    </div>
    <div class="equipment__table">
      <div class="item title">
        <span></span>
        <span>巡检异常数</span>
      </div>
      <div v-for="(item,i) in data" :key="i" class="item">
        <span>{{item.cityName}}</span>
        <span class="num">{{item.jrbjjl}}</span>
      </div>
    </div>
    <div class="equipment__select">
      <div class="equipment__select-city">
        <el-select v-model="city" size="mini" @change="getData">
            <el-option
              v-for="(item, i) in cityList"
              :key="i"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
      </div>
    </div>
    <div class="equipment__content">
      <div class="equipment__content-item">
        <ve-ring :data="sbChartData" :settings="chartSettings" :extend="chartExtend" width="20rem" height="10rem"></ve-ring>
        <div class="total">设备总数：<span>{{sbData.jcsbzs}}</span>台</div>
      </div>
      <div class="equipment__content-item">
        <ve-pie :data="xjChartData" :settings="pieSettings" :extend="pieExtend" width="20rem" height="10rem"></ve-pie>
        <div class="total">设备巡检数：<span>{{sbData.sbxjs}}</span>次</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Select, Option, Checkbox, DatePicker } from 'element-ui'
import Vring from 'v-charts/lib/ring.common'
import Vpie from 'v-charts/lib/pie.common'
import { milliFormat, formatDate, getDay, formatFontSize } from 'js/utils'
import { getSbxj } from 'src/api/api'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Checkbox.name]: Checkbox,
    [DatePicker.name]: DatePicker,
    [Vring.name]: Vring,
    [Vpie.name]: Vpie,
  },
  data(){
    return {
      checked: false,
      dayTime: formatDate('yyyy-mm', new Date()),
      cityList: storage.get('cityList'),
      city: '苏州',
      data: [],
      sbData: {},
      sbChartData: {
        columns: ['name', 'value'],
        rows: [],
      },
      xjChartData: {
        columns: ['name', 'value'],
        rows: [],
      },
      chartSettings: {
        dimension: 'name',
        metrics: 'value',
        radius: ['50%', '65%'],
        offsetY: formatFontSize(1),
        label: {
          show: false,
          fontSize: formatFontSize(0.1),
        },
      },
      chartExtend: {
        title:[
          {
            text: '',
            subtext: '设备正常率',
            textStyle:{
              fontSize: formatFontSize(0.18),
              color: '#fff',
              fontWeight: 'normal',
            },
            subtextStyle: {
              fontSize: formatFontSize(0.09),
              color: '#fff',
              fontWeight: 'normal'
            },
            textAlign:"center",
            x: '39%',
            y: '25%',
          }
        ],
        tooltip: {
          show: false,
          position: ['50%', '50%'],
        },
        legend: {
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          selectedMode: false,
          orient: 'vertical',
          align: 'left',
          right: 0, 
          top: '40%',
          itemWidth: formatFontSize(0.12),
          itemHeight: formatFontSize(0.06),
          formatter: param => {
            let data = this.sbChartData.rows
            let target
            for(let i=0; i<data.length; i++) {
              if(data[i].name == param) {
                target = data[i].value
              }
            }
            return param + '  '+ target + '次'
          }
        },
        series: {
          center: ['40%', '40%'],
        },
        color: ['#FFEA00', '#0A8CFF', '#981DD9'],
      },
      pieSettings: {
        // roseType: 'radius',
        radius: formatFontSize(0.45),
        // offsetY: 100,
        // labelLine: {
        //   length: 5,
        //   length2: 5,
        // },
        label: {
          show: false,
          // position: 'inner',
          color: '#0B153A',
          fontSize: formatFontSize(0.1)
        }
      },
      pieExtend: {
        tooltip: {
          show: false,
          position: ['50%', '50%'],
        },
        color: ['#E56F82', '#45F0EA', '#EDB049'],
        legend: {
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12),
          },
          selectedMode: false,
          orient: 'vertical',
          align: 'left',
          right: 0, 
          top: '40%',
          itemWidth: formatFontSize(0.12),
          itemHeight: formatFontSize(0.06),
          formatter: param => {
            let data = this.xjChartData.rows
            let target
            for(let i=0; i<data.length; i++) {
              if(data[i].name == param) {
                target = data[i].value
              }
            }
            return param + '  '+ target + '次'
          }
        },
        series: {
          center: ['40%', '40%']
        },
        color: ['#EDB049', '#0E962A'],
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {}
      if(this.checked) {
        params = {
         dayTime: formatDate('yyyy-mm-dd', new Date()),
         city: this.city
        }
      } else {
        params = {
          dayTime: this.dayTime,
          city: this.city
        }
      }
      getSbxj(params).then( res => {
        this.data = res.data.cityDatas
        this.chartExtend.title[0].text = res.data.sbzcyzl + '%'
        this.sbData = res.data
        this.sbChartData.rows = [
          { 'name': '设备异常数', 'value': res.data.sbycs },
          { 'name': '设备正常数', 'value': res.data.sbzcs }
        ]
        this.xjChartData.rows = [
          { 'name': '异常数', 'value': res.data.jrbjjl },
          { 'name': '正常数', 'value': res.data.xjzcs }
        ]
      })
    }
  }
}
</script>
<style lang="scss">
.equipment {
  &__select {
    text-align: right;
    padding: 5px 20px 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor {
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-date {
      margin-right: 20px;
      .el-date-editor {
        width: 135px;
      }
    }
    &-city {
      .el-select {
        width: 100px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__table {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    // height: 150px;
    width: 100%;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      span {
        display: block;
        border: 1px solid #6A97AA;
        width: 60px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #6A97AA;
        text-align: center;
        // padding-top: 10px;
      }
      .num {
        color: #FF637E;
      }
    }
    .title {
      span {
        width: 65px;
        line-height: 20px;
        font-size: 10px;
      }
    }
  }
  &__content {
    display: flex;
    &-item {
      display: flex;
      flex-direction: column;
      // text-align: center;
      // width: 0;
      .total {
        font-size:12px;
        color: #7CA1D2;
        padding-left: 90px;
        margin-top: -30px;
      }
    }
  }
  // @media (min-width: 1921px) {
  //   &__select {
  //     padding-right: 50px;
  //   }
  //   &__table {
  //     .item {
  //       span {
  //         width: 110px;
  //         height: 30px;
  //         line-height: 30px;
  //         font-size: 16px;
  //       }
  //     }
  //   }
  // }
}
</style>